<template>
  <div class="fill">
    <div class="table">
      <el-table
        v-loading="data.loading"
        element-loading-text="数据加载中..."
        :data="data.behaviorLogData"
        class="fill"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="adminName" label="请求人" />
        <el-table-column prop="message" label="消息" />
        <el-table-column prop="url" label="请求地址" show-overflow-tooltip />
        <el-table-column prop="params" label="请求参数" show-overflow-tooltip />
        <el-table-column prop="method" label="请求方法" />
        <el-table-column prop="ip" sortable label="ip地址" />
        <el-table-column prop="affected" sortable label="受影响行数" />
        <el-table-column
          width="180"
          prop="createTimeStr"
          sortable
          label="创建时间"
        />
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        :page-size="datas.limit"
        layout="prev, pager, next"
        :total="datas.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, onMounted } from "vue";
import { behaviorLogPagination } from "@/api/behaviorLog/index";

const props = defineProps({
  searchWord: {
    type: String,
  },
  flag: {
    type: Boolean,
  },
});

const data = reactive({
  behaviorLogData: [],
  loading: false,
});

const datas = reactive({
  page: 1,
  limit: 10,
  total: 0,
});

// 点击分页
const handleSizeChange = (val: number) => {
  datas.page = 1;
  datas.limit = val;
};
const handleCurrentChange = (val: number) => {
  datas.page = val;
};

const bind = async () => {
  data.loading = true;
  const res = await behaviorLogPagination({
    page: datas.page,
    limit: datas.limit,
    key: props.searchWord,
  });
  if (res.code === 0) {
    data.behaviorLogData = res.data.data;
    datas.total = res.data.total;
  }
  data.loading = false;
};

// 监听数据变化
watch([datas, () => props.searchWord, () => props.flag], (newVal, oldVal) => {
  bind();
});

// 页面加载完成后执行
onMounted(() => {
  bind();
});
</script>

<style scoped></style>
